<template>
  <div class="waterAnalysis">
    <button class="leftTreetitleButton" @click="treeShowOrClose = true" v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-if="treeShowOrClose">
      <areaLeftTree class="waterMeterLeftTree" @getSearch="getSearch" @clickClose="clickClose" />
    </div>
    <!-- 右侧内容 -->
    <div :class="[
      { rightcontant: treeShowOrClose },
      { rightcontant2: !treeShowOrClose },
    ]">
      <div class="right-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="压力报表" name="yali">
            <preseReport @getdate="getdate" @getdmy="getdmy" :dateBin="dmy" :exportQuerylist="exportQuerylist" :datalist="datalist" :activeName="activeName" v-if="activeName === 'yali'" :judegtable="judegtable"></preseReport>
          </el-tab-pane>
          <el-tab-pane label="流量报表" name="liuliang">
            <preseReport @getdate="getdate" @getdmy="getdmy" :dateBin="dmy" :dateVal="querylist.reportDateStr" :exportQuerylist="exportQuerylist" :datalist="datalist" :activeName="activeName" v-if="activeName === 'liuliang'" :judegtable="judegtable">
            </preseReport>
          </el-tab-pane>
          <el-tab-pane label="水量报表" name="shuiliang">
            <preseReport @getdate="getdate" @getdmy="getdmy" :dateBin="dmy" :dateVal="querylist.reportDateStr" :exportQuerylist="exportQuerylist" :datalist="datalist" :activeName="activeName" v-if="activeName === 'shuiliang'" :judegtable="judegtable">
            </preseReport>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import areaLeftTree from "./../components/areaLeftTree"; // 区域树
import preseReport from "./preseReport"; // 运营报表模块
import { formatTime } from "@/utils/date.js";
import {
  getHydrantPressureDayReport, //压力 流量日数据请求
  getHydrantPressureMonthReport, //压力流量月数据请求
  getHydrantPressureYearReport, //压力流量年数据请求
  findHydrantWaterListDay, //水量日
  findHydrantWaterListMonth, //水量月
  findHydrantWaterListYear, //水量年
} from "@/api/schedule/base/datadetail/index.js";
// import {

//   // exprotXls, //导出xlsx数据

//   // changeMeterNo, //导出下载模板
// } from "@/api/baseManage/flCustomerInfo/index";

export default {
  components: {
    areaLeftTree,
    preseReport,
  },

  data () {
    return {
      treeShowOrClose: true,
      //分页
      nodeData: {}, // 检测点数据
      emptyType: 0,
      //tab栏当前选择项
      activeName: "yali",
      //日期
      //日月年 0 日 1 月 2 年
      dmy: "",
      datevalue: "",
      querylist: {
        hydrantId: "",
        properties: "pressure",
        reportDateStr: "",
      },
      exportQuerylist: {
        hydrantId: "",
        properties: "",
        reportDateStr: "",
      },
      datalist: [],
      judegtable: null,
      defaultid: null,
    };
  },
  mounted () {
    if (this.querylist.reportDateStr === "") {
      let date = formatTime(new Date());
      this.querylist.reportDateStr = date.slice(0, 10).split("/").join("-");
      this.exportQuerylist.reportDateStr = date.slice(0, 10).split("/").join("-");
      this.datevalue = this.querylist.reportDateStr;
      console.log(this.datevalue,'2222222222222222');
    }
    this.judgerequest(this.querylist);
  },
  methods: {
    // 判断发送请求
    judgerequest (obj) {
      if (this.dmy == 0) {
        obj.reportDateStr = this.datevalue;
        // obj.reportDateStr = "2022-05-06";
        this.exportQuerylist.reportDateStr=obj.reportDateStr;
        if (
          (obj.properties === "pressure" || obj.properties === "flow") &&
          this.activeName !== "shuiliang"
        ) {
          getHydrantPressureDayReport(obj).then((res) => {
            this.datalist = res.data;
            this.judegtable = 1;
            if (obj.properties === "pressure") {
              if (this.exportQuerylist.params) {
                delete this.exportQuerylist.params;
              }
              this.exportQuerylist.properties = "pressure";
              this.judegtable = 1; // 压力日
            } else {
              if (this.exportQuerylist.params) {
                delete this.exportQuerylist.params;
              }
              this.exportQuerylist.properties = "flow";
              this.judegtable = 2; //流量日
            }
          });
        } else if (this.activeName === "shuiliang") {
          findHydrantWaterListDay(obj).then((res) => {
            this.exportQuerylist.properties = "read_num,last_read_num,use_count";
            this.exportQuerylist.params = [
              "readNum",
              "lastReadNum",
              "useCount"
            ];
            this.judegtable = 3; //水量日
            this.datalist = res.data;
          });
        }
      } else if (this.dmy == 1) {
        obj.reportDateStr = this.datevalue;
        obj.reportDateStr = this.datevalue.slice(0, 7);
        this.exportQuerylist.reportDateStr = obj.reportDateStr.slice(0, 7);
        if (
          (obj.properties === "pressure" || obj.properties === "flow") &&
          this.activeName !== "shuiliang"
        ) {
          getHydrantPressureMonthReport(obj).then((res) => {
            this.datalist = res.data;
            if (obj.properties === "pressure") {
              if (this.exportQuerylist.params) {
                delete this.exportQuerylist.params;
              }
              this.exportQuerylist.properties = "pressure";
              this.judegtable = 4; //压力月
            } else {
              if (this.exportQuerylist.params) {
                delete this.exportQuerylist.params;
              }
              this.exportQuerylist.properties = "flow";
              this.judegtable = 5; //流量月
            }
          });
        } else if (this.activeName === "shuiliang") {
          findHydrantWaterListMonth(obj).then((res) => {
            this.datalist = res.data;
            this.exportQuerylist.properties = "use_count";
            this.exportQuerylist.params = ["useCount"];
            this.judegtable = 6; //水量月
          });
        }
      } else if (this.dmy == 2) {
        obj.reportDateStr = this.datevalue;
        obj.reportDateStr = obj.reportDateStr.slice(0, 4);
        this.exportQuerylist.reportDateStr = obj.reportDateStr.slice(0, 4);
        if (
          (obj.properties === "pressure" || obj.properties === "flow") &&
          this.activeName !== "shuiliang"
        ) {
          getHydrantPressureYearReport(obj).then((res) => {
            this.datalist = res.data;
            if (obj.properties === "pressure") {
              if (this.exportQuerylist.params) {
                delete this.exportQuerylist.params;
              }
              this.exportQuerylist.properties = "pressure";
              this.judegtable = 7; //压力年
            } else {
              if (this.exportQuerylist.params) {
                delete this.exportQuerylist.params;
              }
              this.exportQuerylist.properties = "flow";
              this.judegtable = 8; //流量年
            }
          });
        } else if (this.activeName === "shuiliang") {
          findHydrantWaterListYear(obj).then((res) => {
            this.datalist = res.data;
            this.exportQuerylist.properties = "use_count";
            this.exportQuerylist.params = ["useCount"];
            this.judegtable = 9; //水量年
          });
        }
      }
      // obj.reportDateStr = this.datevalue;
    },
    clickClose (res) {
      if (res === "点击隐藏") {
        this.treeShowOrClose = false;
      }
    },
    // 左侧小区条件----------------------
    getSearch (e, i) {
      this.nodeData = e;
      this.defaultid = i[0];
      this.laiyixiazi();
      console.log(e, "点击树节点");
    },
    laiyixiazi () {
      if (this.activeName === "yali") {
        this.querylist.hydrantId = this.nodeData.id;
        this.exportQuerylist.hydrantId = this.nodeData.id;
        this.querylist.properties = "pressure";
        // console.log(this.exportQuerylist.properties)
        // debugger;
        // console.log(this.exportQuerylist.properties)
        // debugger;
        this.judgerequest(this.querylist);
      } else if (this.activeName === "liuliang") {
        this.querylist.hydrantId = this.nodeData.id;
        this.exportQuerylist.hydrantId = this.nodeData.id;
        this.querylist.properties = "flow";
        // console.log(this.exportQuerylist.properties)
        // debugger;
        // console.log(this.exportQuerylist.properties)
        // debugger;
        this.judgerequest(this.querylist);
      } else if (this.activeName === "shuiliang") {
        this.querylist.hydrantId = this.nodeData.id;
        this.exportQuerylist.hydrantId = this.nodeData.id;
        if (this.dmy === 0) {
          this.querylist.properties = "last_read_num,read_num,use_count";
          this.exportQuerylist.properties = "last_read_num,read_num,use_count";
          this.querylist.params = ["lastReadNum", "readNum", "useCount"];
        } else if (this.dmy === 1 || this.dmy === 2) {
          this.querylist.properties = "use_count";
          this.exportQuerylist.properties = "use_count";
          this.querylist.params = ["useCount"];
        }
        this.judgerequest(this.querylist);
      }
    },
    //获取选择日期
    getdate (value) {
      console.log(value)
      console.log(this.querylist)
      // this.$set(this.querylist,"reportDateStr",value)
      this.querylist.reportDateStr = value;
      this.exportQuerylist.reportDateStr = value;
      this.datevalue = value
      console.log(this.querylist)
      this.laiyixiazi();
    },
    //获取日月年
    getdmy (value) {
      this.dmy = value;
      console.log(this.dmy, "this.dmy");
      this.laiyixiazi();
    },
    handleClick (tab, event) {
      this.dmy = 0;
      this.activeName = tab.name;
      this.laiyixiazi();
    },
  },
};
</script>

<style lang="scss" scoped>
.waterAnalysis {
  display: flex;

  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }

  .leftTree {
    width: 270px;

    // border-right: 1px solid #e6e6e6;
    // border-bottom: 1px solid #e6e6e6;
    .waterMeterLeftTree {
      border: 1px soild #ccc;
    }
  }

  .rightcontant {
    width: calc(100% - 270px);
    padding: 0 14px 0 2px;
  }

  .rightcontant2 {
    width: 100%;
    padding: 0 14px 0 2px;
  }

  .right-tabs {
    margin-left: 20px;
    height: 100%;

    .box-card {
      height: 100%;
    }
    /deep/.el-card__body{
      padding: 5px 20px;
    }
  }
}
</style>
